<template>
    <a-modal :keyboard="false" :maskClosable="false" title="工单作废" :open="visible" :width="550" :confirmLoading="loading" centered @ok="handleSubmit" @cancel="handleCancel">
        <a-form layout="vertical">
            <a-row :gutter="16" type="flex" justify="start">
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="作废原因" v-bind="validateInfos.reasonValue">
                        <a-select v-model:value="modelRef.reasonValue" @change="handleChange">
                            <a-select-option v-for="(item, index) in sourceData" :key="index" :value="item.value">{{ item.label }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" v-if="modelRef.reasonValue === 'cancel_repeat'">
                    <a-col :xs="24" :sm="24" :md="24">
                        <a-form-item label="原工单" v-bind="validateInfos.orderNumRepeat">
                            <a-input v-model:value="modelRef.orderNumRepeat" ></a-input>
                        </a-form-item>
                    </a-col>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                    <a-form-item label="作废说明" v-bind="validateInfos.content">
                        <a-textarea v-model:value="modelRef.content" show-count :maxlength="500"></a-textarea>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
    import type { PropType } from 'vue';
    import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
    import { Form, message } from 'ant-design-vue';
    import { cloneDeep, isEmpty } from 'lodash-es';
    import { cancelOrder } from '@/api/order/mine-list';
    import { dictDataListByDictType } from '@/api/user/dict';

    export default defineComponent({
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            model: {
                type: Object as PropType<any>,
                default: () => null,
            },
        },
        emits: ['cancel', 'success'],
        setup(props, { emit }) {
            const loading = ref(false);

            const sourceData = ref<any[]>([]);
            const defaultForm = {
                reasonValue: '',
                content: '',
            };
            const modelRef = reactive<any>(cloneDeep(defaultForm));
            const rulesRef = reactive({
                reasonValue: [{ required: true, message: '请选择' }],
                content: [{ required: true, message: '请选择' }],
            });
            const { validateInfos, resetFields, validate } = Form.useForm(modelRef, rulesRef);

            // 记录初始值
            const initValues = reactive({});
            watch(
                () => props.visible,
                () => {
                    Object.assign(initValues, cloneDeep(props.model));
                },
            );
            watchEffect(() => {
                if (props.visible) {
                    if (props.model) {
                        Object.assign(modelRef, {
                            id: props.model.id,
                            orderClassifyNameOld: props.model.orderClassifyName,
                        });
                        console.log(modelRef);

                        dictDataListByDictType({
                            dictType: 'cancel_type',
                            size: 1000,
                            current: 1,
                        }).then(res => {
                            sourceData.value = res.data;
                        });
                    }
                }
            });

            const handleChange = (val, options) => {
                console.log(val, options);
                const current = sourceData.value.find(item => item.value === val);
                modelRef.reasonLabel = current.label;
            };

            const handleCancel = () => {
                resetFields();
                Object.keys(modelRef).forEach(key => {
                    delete modelRef[key];
                });
                Object.assign(modelRef, cloneDeep(defaultForm));

                modelRef.status = 1;
                emit('cancel');
            };

            const handleSubmit = async () => {
                const { id: orderId, content, reasonValue, reasonLabel, orderNumRepeat } = modelRef;
                const params: any = {
                    orderId,
                    content,
                    reasonValue,
                    reasonLabel,
                };
                if (reasonValue === 'cancel_repeat') {
                    if (!!orderNumRepeat) {
                        params.orderNumRepeat = orderNumRepeat;
                    } else {
                        message.error('请输入原工单号');
                        return false;
                    }
                }

                validate().then(() => {
                    loading.value = true;

                    cancelOrder(params)
                        .then(res => {
                            if (res.data) {
                                message.success('操作成功');
                                emit('success');
                                handleCancel();
                            }
                        })
                        .finally(() => {
                            loading.value = false;
                        });
                });
            };
            return {
                loading,

                modelRef,
                validateInfos,
                resetFields,

                handleSubmit,
                handleCancel,

                initValues,
                sourceData,
                isEmpty,
                handleChange,
            };
        },
        components: {},
    });
</script>
